<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>div</div>
    <p>p</p>
</body>
<script src="../jquery-3.4.1.js"></script>
<script>
    //监听页面的方式：
    //jq
    // $(document).ready(function(){
    //     let _div = document.querySelector('div')
    //     console.log(_div);
    // })
    // $(document).ready(function(){
    //     let _p = document.querySelector('p');
    //     console.log(_p);
        
    // });
    // $(()=>{
    //     let _p1 = document.querySelector('p');
    //     console.log(_p1);
    // });


    //方法的操作
    $(()=>{
        // $('p').text('p是标签')
        // $('div').addClass('box').addClass('box1');

        //addClass 添加多个类名就在括号里面写
        $('div').addClass('t1 t2 t3 t4');//添加类名

        // $('div').removeClass('t1');
        $('div').removeClass('t3 t2')

        /*{4} 切换  如果当前标签存在对应的样式那么就删除它，否则那么就添加这个样式 */
        $('div').toggleClass('t1 active')

        $('p').css('color','red');//添加样式
        // $('p').css('background','#58bc58');//添加样式
        $('p').css({
            background:"green",
            width:"200px",
            height:"50px",
        })
        //hasClass 检查是否该类名
        console.log($('div').hasClass('t3'));//false
    
    });
    
</script>
</html>